<template>
  <vue-modal
    @submitData="assignPermission"
    :modalTitle="modalTitle"
    modalName="assignPermissionModal"
    modalWidth="1200"
    ref="assignPermissionModal">
    <div slot="content" class="form-box">
      <div class="role-tree" v-for="(item, index) in treeData">
        <h3>{{item.permissionName}}</h3>
        <el-tree
          :data="item.children"
          show-checkbox
          default-expand-all
          :ref="'tree' + index"
          node-key="id"
          highlight-current
          :props="defaultProps">
        </el-tree>
      </div>
    </div>
  </vue-modal>
</template>

<script>

  import VueModal from 'components/common/modal/VueModal';

  import {getAllPermissions, getPermissionByRole} from "../../../network/viewsRequest/permission";
  import {tranResDataToTreeData} from "../../../common/utils";
  import {assignPermission} from "../../../network/viewsRequest/role";

  export default {
    name: "AssignPermissionTemplate",
    data() {
      return {
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'permissionName'
        },
        entity: {
          roleId: null,
          roleName: '',
          permissionIds: []
        }
      }
    },
    props: {
      roleDataFromParent: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    components: {
      VueModal
    },
    watch: {
      roleDataFromParent: {
        deep: true,
        handler(val) {
          // 1.回显信息
          this.assignFormFromParent(val);
          // 2.去服务器中取权限数据
          this.getPermissionByRole(val.id);
        }
      }
    },
    methods: {
      /**
       * 打开模态框
       */
      show() {
        // 如果roleId有值，要调用方法回显他拥有的权限
        if (this.entity.roleId) {
          this.getPermissionByRole(this.entity.roleId)
        }
        this.$refs.assignPermissionModal.show();
      },
      /**
       * 关闭模态框
       */
      close() {
        this.$refs.assignPermissionModal.closeModal();
      },
      /**
       * 分配权限
       */
      assignPermission() {
        // 1.获取所选的选项
        let permissions = [];
        for (let i = 0; i < this.treeData.length; i++) {
          permissions.push(...this.$refs[`tree${i}`][0].getCheckedNodes());
        }
        // 检查用户有没有选择权限
        if (permissions.length === 0) {
          this.$message.error("权限的选择不能为空");
          return;
        }
        this.entity.permissionIds = permissions.map(item => {
          return item.id;
        })
        // 2.进行保存
        assignPermission(this.entity).then(res => {
          if (res.code == 1) {
            this.$message.success("权限分配成功！");
            this.close();
          } else {
            this.$message.error(res.message);
          }
        })
      },
      /**
       * 获取所有的权限
       */
      getAllPermissions() {
        getAllPermissions().then(res => {
          let rawData = res.data;
          this.treeData = tranResDataToTreeData(rawData);
        })
      },
      /**
       * 回显除了权限以外的信息
       * @param role
       */
      assignFormFromParent(role) {
        this.entity.roleId = this.$set(this.entity, "roleId", role.id);
        this.entity.roleName = this.$set(this.entity, "roleName", role.roleName);
      },
      /**
       * 回显权限信息
       * @param roleId
       */
      getPermissionByRole(roleId) {
        getPermissionByRole(roleId).then(res => {
          if (res.code == 1) {
            for (let i = 0; i < this.treeData.length; i++) {
              this.$refs[`tree${i}`][0].setCheckedNodes(tranResDataToTreeData(res.data));
            }
          }
        })
      }
    },
    mounted() {
      this.getAllPermissions();
    },
    computed: {
      modalTitle() {
        return "为" + this.entity.roleName + "分配权限";
      }
    }
  }
</script>

<style scoped>
  .form-box {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-around;
  }

  .role-tree {
    width: 250px;
  }
  h3 {
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
</style>